<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>河套灌区农业面源污染决策支持系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        /* 头部容器 */
        .header-container {
            background-color: rgb(0,135,60);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            position: relative;
        }
        
        /* 校徽样式 */
        .xiaohui {
            position: absolute;
            top: 10px;
            left: 10px;
            display: block;
        }
        
        /* 标题容器 */
        .title-container {
            flex: 1;
            text-align: center;
        }
        
        /* 中文标题 */
        .chinese-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
            letter-spacing: 2px;
        }
        
        /* 英文标题 */
        .english-title {
            font-size: 16px;
            letter-spacing: 1px;
        }
        
        /* 用户信息区域 */
        .user-info {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
        }
        
        .welcome {
            margin-right: 15px;
            font-size: 16px;
        }
        
        button {
            font-size: 14px;
            padding: 5px 10px;
            border: 1px solid white;
            border-radius: 3px;
            background: transparent;
            color: white;
            cursor: pointer;
        }
        
        button:hover {
            background-color: rgba(255,255,255,0.2);
        }
        
        .container {
            max-width: 80%;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: #1a5f1a;
            padding: 10px 0;
        }
        
        .nav-menu {
            display: flex;
            justify-content: center;
            list-style: none;
            flex-wrap: wrap;
        }
        
        .nav-menu li {
            margin: 0 15px;
        }
        
        .nav-menu a {
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            padding: 5px 10px;
            transition: all 0.3s;
        }
        
        .nav-menu a:hover {
            background-color: #0e4a0e;
            border-radius: 3px;
        }
        
        /* 主要内容 */
        .main-content {
            display: flex;
            width: 100%;
            margin: 15px 0;
        }
        
        .sidebar {
            width: 200px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-right: 30px;
            flex: none; 
        }
        
        .sidebar-title {
            font-size: 18px;
            color: rgb(0,135,60);
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 15px;
          
        }
        
        .sidebar-menu {
            list-style: none;
        }
        
        .sidebar-menu li {
            margin-bottom: 10px;
        }
        
        .sidebar-menu a {
            color: #333;
            text-decoration: none;
            display: block;
            padding: 8px 5px;
            transition: all 0.3s;
        }
        
        .sidebar-menu a:hover {
            color: #1a5f1a;
            background-color: #f0f0f0;
            border-radius: 3px;
        }
        
        .content {
            flex: 5;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .content-title {
            font-size: 22px;
            color: #1a5f1a;
            padding-bottom: 15px;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
        }
        
        .gd {
            text-align: center;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* 页脚 */
        .footer {
            text-align: center;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #1a5f1a;
            padding: 20px 0;
            border-top: 1px solid #e9ecef;
            color:#fff;
            margin-top: 30px;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }
            
            .nav-menu {
                justify-content: flex-start;
                padding: 0 15px;
            }
            
            .nav-menu li {
                margin: 5px 10px;
            }
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        
        th {
            background-color: #f2f2f2;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .table-controls {
            margin-bottom: 15px;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .search-container {
            display: flex;
            gap: 10px;
            flex-grow: 1;
            max-width: 400px;
        }
        
        #searchInput {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            flex-grow: 1;
            max-width: 300px;
        }
        
        .pagination {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }
        
        .action-button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .action-button:hover {
            background-color: #45a049;
        }
        
        #loadingIndicator {
            padding: 10px;
            text-align: center;
            font-style: italic;
            color: #666;
        }
        .sidebar-menu a.active {
    color: black;
    background-color: rgb(232, 230, 230);
    border-radius: 3px;
    font-weight: bold;
}

.sidebar-menu a.active:hover {
    background-color:  rgb(232, 230, 230); /* 保持悬停时颜色不变 */
}
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <div class="header-container">
        <!-- 校徽 -->
        <img src="../images/footer_logo.png"
             width="190px"
             height="60px"
             class="xiaohui">
        
        <!-- 标题 -->
        <div class="title-container">
            <div class="chinese-title">河套灌区农业面源污染决策支持系统</div>
            <div class="english-title">Decision Support System for Agricultural Non-Point Source Pollution in the Hetao Irrigation District</div>
        </div>
        
        <!-- 用户信息 -->
        <div class="user-info">
            <span class="welcome">用户您好</span>
            <button type="button" onclick="window.location.href='封面.html'">退出登录</button>
        </div>
    </div>
    
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <ul class="nav-menu">
                <li><a href="#"onclick="window.location.href='../首页.html'">首页</a></li>
                <li><a href="#"onclick="window.location.href='weather.html'">属性数据</a></li>
                <li><a href="#"onclick="window.location.href='包气带介质类型.html'">空间数据</a></li>
                <li><a href="#"onclick="window.location.href='案例.html'">模型库</a></li>
                <li><a href="#"onclick="window.location.href='地表水环境质量标准.html'">知识库</a></li>
                <li><a href="#"onclick="window.location.href='相关网站.html'">相关网站</a></li>
            </ul>
        </div>
    </nav>
  
    <!-- 主要内容 -->
    <div class="container">
        <div class="main-content">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <h3 class="sidebar-title">属性数据</h3>
                <ul class="sidebar-menu">
                    <li><a href="#"onclick="window.location.href='weather.html'">气象数据</a></li>
                    <li><a href="#"onclick="window.location.href='agriculture.html'">农业数据</a></li>
                    <li><a href="#"onclick="window.location.href='pa.html'">作物播种面积</a></li>
                    <li><a href="#"onclick="window.location.href='cty.html'">作物产量数据</a></li>
                    <li><a href="#" onclick="window.location.href='ypm.html'">作物亩产数据</a></li>
                    <li><a href="#"onclick="window.location.href='gyy.html'">工业源数据</a></li>
                    <li><a href="#"onclick="window.location.href='lpf.html'">畜禽养殖场数据</a></li>
                    <li><a href="#"onclick="window.location.href='xqyz.html'">畜禽养殖数据</a></li>
                    <li><a href="#"onclick="window.location.href='rp.html'">农村人口数据</a></li>
                    <li><a href="#"class="active"onclick="window.location.href='gd.html'">地下水埋深数据</a></li>
                    <li><a href="#"onclick="window.location.href='gq.html'">地下水水质数据</a></li>
                    <li><a href="#"onclick="window.location.href='swq.html'">地表水水质数据</a></li>
                </ul>
            </aside>
            
            <!-- 主要内容区 -->
            <main class="content">
                <h2 class="content-title">地下水埋深</h2>
                
                <!-- 表格控制区 -->
                <div class="table-controls">
                    <div class="search-container">
                        <input type="text" id="searchInput" placeholder="搜索...">
                        <button id="searchButton" class="action-button">搜索</button>
                    </div>
                    <button onclick="exportToExcel()" class="action-button">导出Excel</button>
                    <div class="pagination">
                        <button id="prevPage" class="action-button">上一页</button>
                        <span id="pageInfo">1/1</span>
                        <button id="nextPage" class="action-button">下一页</button>
                    </div>
                </div>
                
                <!-- 图片 -->
                <img src="../images/地下水埋深.jpg"
                     width="1200px"
                     height="600px"
                     class="gd"
                     alt="地下水埋深图">
                
                <!-- 表格容器 -->
                <div id="tableContainer">
                    <table id="gdTable">
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>灌域</th>
                                <th>经度</th>
                                <th>纬度</th>
                                <th>编号</th>
                                <th>2001年</th>
                                <th>2002年</th>
                                <th>2003年</th>
                                <th>2004年</th>
                                <th>2005年</th>
                                <th>2006年</th>
                                <th>2007年</th>
                                <th>2008年</th>
                                <th>2009年</th>
                                <th>2010年</th>
                                <th>2011年</th>
                                <th>2012年</th>
                                <th>2013年</th>
                                <th>2014年</th>
                                <th>2015年</th>
                                <th>2016年</th>
                                <th>2017年</th>
                                <th>2018年</th>
                                <th>2019年</th>
                                <th>2020年</th>
                                <th>2021年</th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            <!-- 数据将通过AJAX动态填充 -->
                        </tbody>
                    </table>
                </div>
                
                <div id="loadingIndicator" style="display: none;">加载中...</div>
                <div id="errorMessage" style="color: red; display: none;"></div>
            </main>
        </div>
    </div>

    <script>
           document.addEventListener('DOMContentLoaded', function() {
            const loadingIndicator = document.getElementById('loadingIndicator');
            const errorMessage = document.getElementById('errorMessage');
            
            loadingIndicator.style.display = 'block';
            errorMessage.style.display = 'none';

            fetchgdData(1); // 初始化加载第一页数据

            // 搜索功能
            document.getElementById('searchInput').addEventListener('keyup', debounce(function() {
                const keyword = this.value.trim();
                if (keyword.length > 2) { // 输入超过2个字符才搜索
                    fetch(`http://localhost:1111/api/gd?search=${encodeURIComponent(keyword)}`)
                        .then(response => response.json())
                        .then(data => renderTable(data.data));
                } else if (keyword.length === 0) {
                    fetchgdData(currentPage); // 重置为正常分页
                }
            }, 500)); // 防抖500ms
            
            // 搜索按钮点击事件
            document.getElementById('searchButton').addEventListener('click', function() {
                const keyword = document.getElementById('searchInput').value.trim();
                if (keyword.length > 0) {
                    fetch(`http://localhost:1111/api/gd?search=${encodeURIComponent(keyword)}`)
                        .then(response => response.json())
                        .then(data => renderTable(data.data));
                }
            });
        });

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                const context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(context, args), wait);
            };
        }

        // 分页功能
        let currentPage = 1;
        const rowsPerPage = 8; // 每页显示8条

        async function fetchgdData(page = 1) {
            const loadingIndicator = document.getElementById('loadingIndicator');
            const errorMessage = document.getElementById('errorMessage');
            
            loadingIndicator.style.display = 'block';
            errorMessage.style.display = 'none';

            try {
                const response = await fetch(`http://localhost:1111/api/gd?page=${page}&limit=${rowsPerPage}`);
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态: ${response.status}`);
                }
                
                const result = await response.json();
                
                if (!result.data || result.data.length === 0) {
                    throw new Error('服务器返回空数据集');
                }
                
                renderTable(result.data);
                updatePaginationControls(result.total, page, result.totalPages);
                
            } catch (error) {
                console.error('完整错误信息:', error);
                errorMessage.innerHTML = `
                    <p>获取数据失败: ${error.message}</p>
                    <p>请检查控制台获取详细信息</p>
                    <button onclick="fetchgdData(${currentPage})">重试</button>
                `;
                errorMessage.style.display = 'block';
            } finally {
                loadingIndicator.style.display = 'none';
            }
        }

        // 渲染表格数据
        function renderTable(data) {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';
            
            data.forEach(row => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${row.id || ''}</td>
                    <td>${row.灌域 || ''}</td>
                    <td>${row.经度 || ''}</td>
                    <td>${row.纬度 || ''}</td>
                    <td>${row.编号 || ''}</td>
                    <td>${row.二〇〇一年 || ''}</td>
                    <td>${row.二〇〇二年 || ''}</td>
                    <td>${row.二〇〇三年 || ''}</td>
                    <td>${row.二〇〇四年 || ''}</td>
                    <td>${row.二〇〇五年 || ''}</td>
                    <td>${row.二〇〇六年 || ''}</td>
                    <td>${row.二〇〇七年 || ''}</td>
                    <td>${row.二〇〇八年 || ''}</td>
                    <td>${row.二〇〇九年 || ''}</td>
                    <td>${row.二〇一〇年 || ''}</td>
                    <td>${row.二〇一一年 || ''}</td>
                    <td>${row.二〇一二年 || ''}</td>
                    <td>${row.二〇一三年 || ''}</td>
                    <td>${row.二〇一四年 || ''}</td>
                    <td>${row.二〇一五年 || ''}</td>
                    <td>${row.二〇一六年 || ''}</td>
                    <td>${row.二〇一七年 || ''}</td>
                    <td>${row.二〇一八年 || ''}</td>
                    <td>${row.二〇一九年 || ''}</td>
                    <td>${row.二〇二〇年 || ''}</td>
                    <td>${row.二〇二一年 || ''}</td>
                `;
                tableBody.appendChild(tr);
            });
        }

        // 更新分页控制
        function updatePaginationControls(total, currentPage, totalPages) {
            document.getElementById('pageInfo').textContent = `${currentPage}/${totalPages}`;
            document.getElementById('prevPage').disabled = currentPage <= 1;
            document.getElementById('nextPage').disabled = currentPage >= totalPages;
        }

        // 分页按钮事件
        document.getElementById('prevPage').addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                fetchgdData(currentPage);
            }
        });

        document.getElementById('nextPage').addEventListener('click', () => {
            currentPage++;
            fetchgdData(currentPage);
        });

        // 导出Excel功能
        function exportToExcel() {
            fetch('http://localhost:1111/api/gd?limit=1000') // 限制导出数量
                .then(response => response.json())
                .then(result => {
                    const ws = XLSX.utils.json_to_sheet(result.data);
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, "gd");
                    XLSX.writeFile(wb, "gd.xlsx");
                })
                .catch(error => {
                    console.error('导出失败:', error);
                    alert('导出失败: ' + error.message);
                });
        }
    </script>
      <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>© 2025 河套灌区农业面源污染决策支持系统 版权所有</p>
        </div>
    </footer>
</body>
</html>